<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=no'>
<title>i-지킴영역설정[관심지역]</title>
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel='shortcut icon' href='resources/img/favicon.png' />
<!--[if IE 8]><link rel='stylesheet' type='text/css' href='resources/css/ie8.css' /><![endif]-->
<!-- Theme Hook -->
<link rel='stylesheet' id='style-css'
	href='resources/css/style.css' type='text/css' media='all' />
<link rel='stylesheet' id='demo_panel-css'
	href='resources/css/side_panel.css' type='text/css' media='all' />
<!--사이드바를 위해 추가-->
<link rel='stylesheet' id='miniColors-css'
	href='resources/css/jquery.miniColors.css' type='text/css'
	media='all' />
<link rel='stylesheet' id='responsive-style-css'
	href='resources/css/responsive.css' type='text/css' media='all' />
<link rel='stylesheet' id='light_skin-css'
	href='resources/css/light_skin.css' type='text/css' media='all' />
<link rel='stylesheet' id='skin13-css'
	href='resources/css/darkallstar.css' type='text/css' media='all' />
<link rel='stylesheet' id='options-css'
	href='resources/css/options.css' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-css'
	href='resources/css/bootstrap.css' type='text/css' media='all' />
<link rel='stylesheet' id='google-webfonts-css'
	href='http://fonts.googleapis.com/css?family=Averia+Libre:400,700'
	type='text/css' media='all' />
<link rel="stylesheet" type="text/css"
	href="resources/css/anytime.css" />
<!--[if lt IE 9]><script src='resources/js/html5shiv.js'></script><![endif]-->
<script type='text/javascript' src='resources/js/jquery.js'></script>
<script type='text/javascript' src='resources/js/demo_panel.js'></script>
<!--사이드바를 위해 추가-->
<script type='text/javascript'
	src='resources/js/jquery.minicolors.js'></script>
<script type='text/javascript' src='resources/js/bootstrap.js'></script>

<!--timepicker추가-->
<script src="resources/js/jquery-ui-1.10.3.custom.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="resources/js/anytime.js"></script>
<script src="resources/js/anytimez.js"></script>
<script type="text/javascript" src="resources/js/polygon_izone.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
	$(function(){
		  //create map
		 var singapoerCenter=new google.maps.LatLng(37.57096460447222, 126.98826849460602);
		 var myOptions = {
		  	zoom: 17,
		  	center: singapoerCenter,
		  	mapTypeId: google.maps.MapTypeId.ROADMAP
		  }
		 map = new google.maps.Map(document.getElementById('map'), myOptions);
		 
		 var creator = new PolygonCreator(map);
		 
		 //reset
		 $('#reset').click(function(){ 
		 		creator.destroy();
		 		creator=null;
		 		creator=new PolygonCreator(map);
		 });
		 
		 //show paths
		 $('#showData').click(function(){ 
		 		if(null==creator.showData()){
		 			alert('영역을 먼저 클릭하여 선택하세요!');
		 		}else{
		 			alert('관심지역 영역을 설정하시겠습니까?');	
		 		}
		 		alert('영역이 설정되었습니다.');
		 		creator.destroy();
		 		creator=null;
		 		creator=new PolygonCreator(map);	
		 });
	});	
</script>
</head>
<body >
	<!--<div id="top"></div>-->
	<!-- Demo Panel -->
	<div id="options_panel" class="">
		<div class="options">
			<table>
				<tr class="demo_title">
					<td><h4>i-지킴영역설정-관심지역</h4></td>
				</tr>
				<tr class="demo_title">
					<td><h5>아이의 알림을 받을 i-지킴영역(관심지역)을 설정하세요.</h5></td>
				</tr>
				<tr>
					<td>
						<form class="form-inline">
							<fieldset>
								<table>
									<tr>
										<td class="control-group form-horizontal"><label
											class="control-label custom-label">자녀선택</label>
											<div class="controls">
												<select id="selectbasic" name="selectbasic"
													class="input-medium" required>
													<option>위키일(01011112222)</option>
													<option>위키이(01033334444)</option>
													<option>위키삼(01055556666)</option>
												</select>
											</div></td>
									</tr>
									<tr class="">
										<td class="control-group form-horizontal"><label
											class="control-label custom-label">설정이름</label>
											<div class="controls setting_name">
												<input name="text" class="input-small"
													placeholder="설정이름을 입력하세요." type="text" required>
											</div> <!--  <p class="help-block">help</p> --></td>
									</tr>
									<tr class="">
										<td class="control-group  form-horizontal"><label
											class="control-label custom-label">지역설정</label>
											<div class="controls">
												<div class="input-append">
													<input id="appendedtext" name="appendedtext"
														class="input-medium" placeholder="동 이름으로 검색" type="text"
														required> <span class="btn"
														style="padding: 4px 3px;">검색</span>
												</div>
											</div></td>
									</tr>
									<tr class="demo_title">
										<td class="right">
											<button type="submit" class="btn btn-success">
												<a>&nbsp;등 록&nbsp;</a>
											</button>
											<button type="button" class="btn">취 소</button>&nbsp;&nbsp;&nbsp;
										</td>
									</tr>
								</table>
							</fieldset>
						</form>
					</td>
				</tr>
			</table>
		</div>
		<h3>
			<span class="icon-wrench icon-white"></span>
		</h3>
	</div>
	<!-- Demo Panel End -->
	<!-- Header -->
	<article id="header_nav">
		<div class="wrap_top_icon">
			<div class="container">
				<div class="mobile-navigation visible-tablet">
					<a id="tablet_menu" href="#"></a>
					<ul>
						<div class="triangle"></div>
						<li><a class="text" href="index">홈</a></li>
						<li><a class="text" href="#">위키미소개</a></li>
						<li><a class="text" href="#location_icur">i-위치확인</a></li>
						<li><a class="text" href="#set_area_dzone">i-지킴영역설정</a></li>
						<li><a class="text" href="#">환경설정</a></li>
						<li><a class="text" href="#">조회</a></li>
						<li><a class="text" href="#">통계</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="wrap wrap_header">
			<div class="container">
				<header class="clearfix">
					<a id="top_button" href="#top"></a>
					<!-- Logo -->
					<div id="top_logo">
						<a class="logo" href="index"> <img
							src="resources/img/wiwi.PNG" alt="Logo" />
						</a>
					</div>
					<!--End Logo -->
					<div class="official">
						<!-- sticky navigation - Official menu -->
						<ul class="localscroll visible-desktop sticky_navigation">
							<li><a class="home" href="index"> <span class="text">홈</span>
									<div class="bottom_border"></div>
							</a></li>
							<li><a class="about" href="#"> <span class="text">위키미소개</span>
									<div class="bottom_border"></div>
							</a></li>
							<li><a class="location" href="location_icur"> <span class="text">i-위치확인</span>
									<div class="bottom_border"></div>
							</a></li>
							<li><a class="danger" href="set_area_dzone"> <span class="text">i-지킴영역설정</span>
									<div class="bottom_border"></div>
							</a></li>
							<li><a class="set" href="#"> <span class="text">환경설정</span>
									<div class="bottom_border"></div>
							</a></li>
							<li><a class="search" href="#"> <span class="text">조회</span>
									<div class="bottom_border"></div>
							</a></li>
							<li><a class="stats" href="#"> <span class="text">통계</span>
									<div class="bottom_border"></div>
							</a></li>
						</ul>
						<!-- End sticky navigation - Official menu -->
					</div>
					<div class="mobile-navigation visible-phone">
						<a id="phone_menu" href="#"></a>
						<ul>
							<div class="triangle"></div>
							<li><a class="text" href="index">홈</a></li>
							<li><a class="text" href="#">위키미소개</a></li>
							<li><a class="text" href="location_icur">i-위치확인</a></li>
							<li><a class="text" href="set_area_dzone">i-지킴영역설정</a></li>
							<li><a class="text" href="#">환경설정</a></li>
							<li><a class="text" href="#">조회</a></li>
							<li><a class="text" href="#">통계</a></li>
						</ul>
					</div>
				</header>
			</div>
		</div>
		<!-- 서브메뉴 -->
		<div class="wrap wrap_primary_navigation">
			<div class="container">
				<div class="primary_navigation">
					<ul id="menu-menu" class="visible-desktop">
						<li id="menu-item-90"
							class="menu-item menu-item-type-custom menu-item-object-custom">
							<a href="set_area_dzone">i-지킴영역설정[위험지역]</a>
							<div class="clearfix"></div>
						</li>
						<li id="menu-item-87"
							class="menu-item menu-item-type-custom menu-item-object-custom">
							<a href="set_area_izone">i-지킴영역설정[관심지역]</a>
							<div class="clearfix"></div>
						</li>
						<li id="menu-item-87"
							class="menu-item menu-item-type-custom menu-item-object-custom">
							<a href="set_area_szone">i-지킴영역설정[안심지역]</a>
							<div class="clearfix"></div>
						</li>
						<li id="menu-item-82"
							class="menu-item menu-item-type-custom menu-item-object-custom" style="float: right;">
							<c:if test="${not empty id}">
								<a href="static/j_spring_security_logout">${id}님&nbsp;&nbsp;로그아웃</a>
								</c:if>
								<c:if test="${empty id}">
								<!-- <a href="login">로그인</a> -->
								<a href="#" onclick='window.open("login","_blank","height=400,width=350, status=yes, toolbar=no, menubar=no, location=no");return false'>로그인</a>
								</c:if>
							<div class="clearfix"></div>
						</li>

						<li id="menu-item-81"
							class="menu-item menu-item-type-custom menu-item-object-custom"
							style="float: right;"><a href="#">회원정보</a>
							<div class="clearfix"></div></li>
						<li id="menu-item-80"
							class="menu-item menu-item-type-custom menu-item-object-custom"
							style="float: right;"><a href="#">커뮤니티</a>
							<div class="clearfix"></div></li>
					</ul>
				</div>
			</div>
			<!-- 서브메뉴를 접기 위해 추가 -->
			<div class="submobile-navigation visible-phone">
				<a id="iphone_menu" href="#"></a>
				<ul>
					<div class="triangle"></div>
					<li><a class="text" href="set_area_dzone">i-지킴영역설정[위험지역]</a></li>
					<li><a class="text" href="#">i-지킴영역설정[관심지역]</a></li>
					<li><a class="text" href="#">i-지킴영역설정[안심지역]</a></li>
					<li>
						<c:if test="${not empty id}">
							<a href="static/j_spring_security_logout">로그아웃</a>
							</c:if>
							<c:if test="${empty id}">
							<!-- <a href="login">로그인</a> -->
							<a href="#" onclick='window.open("login","_self","height=400,width=350, status=yes,toolbar=no,menubar=no,location=no");return false'>로그인</a>
							</c:if>
					</li>
					<li><a class="text" href="#">회원정보</a></li>
					<li><a class="text" href="#">커뮤니티</a></li>

				</ul>
			</div>
			<div class="submobile-navigation visible-tablet">
				<a id="itablet_menu" href="#"></a>
				<ul>
					<div class="triangle"></div>
					<li><a class="text" href="set_area_dzone">i-지킴영역설정[위험지역]</a></li>
					<li><a class="text" href="#">i-지킴영역설정[관심지역]</a></li>
					<li><a class="text" href="#">i-지킴영역설정[안심지역]</a></li>
					<li>
						<c:if test="${not empty id}">
							<a href="static/j_spring_security_logout">로그아웃</a>
							</c:if>
							<c:if test="${empty id}">
							<!-- <a href="login">로그인</a> -->
							<a href="#" onclick='window.open("login","_blank","height=400,width=350, status=yes,toolbar=no,menubar=no,location=no");return false'>로그인</a>
							</c:if>
					</li>
					<li><a class="text" href="#">회원정보</a></li>
					<li><a class="text" href="#">커뮤니티</a></li>
				</ul>
			</div>
			<!-- 서브메뉴를 접기위해 추가 -->
		</div>
	</article>
	<!-- Header End -->
	<!-- map -->
	<article id="wmap" class="Portfolio">
		<div class="wrap wrap_space_primary_menu"></div>
		<div class="wrap">
			<div class="container">
				<header class="row visible-desktop">
					<div class="span12 wrap_sub_title">
						<span class="text">지도에서 클릭하여 영역을 선택하세요 [관심지역]</span>
					</div>
				</header>
				<header class="row visible-tablet">
					<div class="span12 wrap_sub_title">
						<span class="text">지도에서 클릭하여 영역을 선택하세요 [관심지역]</span>
					</div>
				</header>
				<header class="row visible-phone">
					<div class="span12 wrap_sub_title">
						<span class="text">지도에서 클릭하여 영역을 선택하세요 [관심지역]</span>
					</div>
				</header>
				<div class="row">
					<div id="map" class="span12 wrap_form" style="height: 450px">
					</div>
				</div>
				<div id="bottom">
					<input id="reset" value="초기화" type="button"/> 
					<input id="showData" value="지역정보생성" type="button"/>
				</div>
			</div>
		</div>
	</article>
	<!-- home End -->

	<!-- Blog -->
	<article id="blog"></article>
	<!-- End Blog -->

	<!-- location -->
	<article>
		<div class="wrap location_height">
			<div id="location" class="rotated_line rotated_line_location6"></div>
			<div class="contact_map"></div>
			<div class="rotated_line  rotated_line_location5"></div>
		</div>
	</article>
	<!-- End location -->

	<!-- contact -->
	<article id="contact"></article>
	<!-- End contact -->

	<!-- Topbar -->
	<article class="hidden-phone" id="topbar">
		<div class="wrap wrap_topbar">
			<div class="container"></div>
		</div>
	</article>

	<article class="visible-phone topbar_phone">
		<div class="wrap wrap_topbar">
			<div class="container"></div>
		</div>
	</article>
	<!-- End Topbar -->
   <!-- footer -->
   <article  id="stats">
		<div class="wrap wrap_about_space_primary_menu"></div>
		<div class="wrap wrap_footer">
			<div class="container">
				<p class="centerfooter" align="center">wikimi문의 : 000-0000-0000, webmaster@wikimi.com | 고객센터 : 1111-1111, 1:1고객상담 <br>&copy;by wikimi All Rights Reserved</p>
			</div>
		</div>
   </article>
   <!-- footer End-->
	<!-- **********   Theme Hook   ********** -->
	<script type='text/javascript' src='resources/js/superfish.js'></script>
	<script type='text/javascript'
		src='resources/js/jquery.parallax-1.1.3.js'></script>
	<script type='text/javascript'
		src='resources/js/jquery.isotope.min.js'></script>
	<script type='text/javascript'
		src='resources/js/jquery.flexslider-min.js'></script>
	<script type='text/javascript'
		src='resources/js/jquery.magnific-popup.min.js'></script>
	<script type='text/javascript'
		src='resources/js/jquery.cycle.lite.js'></script>
	<script type='text/javascript'
		src='resources/js/jquery.cycle2.swipe.min.js'></script>
	<script type='text/javascript'
		src='resources/js/jquery.nicescroll.min.js'></script>
	<script type='text/javascript'
		src='resources/js/jquery.idTabs.min.js'></script>
	<script type='text/javascript'
		src='resources/js/jquery.easing.1.3.js'></script>
	<script type='text/javascript' src='resources/js/audio.js'></script>
	<script type='text/javascript'
		src='resources/js/jquery.prettyPhoto.js'></script>
	<script type='text/javascript' src='resources/js/widgets.js'></script>
	<script type='text/javascript'
		src='resources/js/jquery.touch-slider.1.0.2.min.js'></script>
	<script type='text/javascript'>
		/* <![CDATA[ */
		var slider_settings = {
			"delay" : "5000",
			"itemInSpeed" : "500",
			"itemOutSpeed" : "1500",
			"bgSpeed" : "700"
		};
		/* ]]> */
	</script>
	<script type='text/javascript'
		src='resources/js/jquery.awesome-slider.1.0.2.min.js'></script>
	<script type='text/javascript'
		src='resources/js/jquery.gmap-2.1.2-min.js'></script>
	<script type='text/javascript'>
		/* <![CDATA[ */
		var theme_uri = {
			"img" : "resources\/img"
		};
		var theme_strings = {
			"contact_submit" : "Send"
		};
		var red_sky_scroll = {
			"scrolling_speed" : "1000",
			"scrolling_easing" : "easeInOutSine",
			"scrolling_hash" : ""
		};
		var red_sky_about_parallax = {
			"about_parallax_speed" : "0.1",
			"about_parallax_position" : "50"
		};
		var red_sky_portfolio_parallax = {
			"portfolio_parallax_speed" : "0.1",
			"portfolio_parallax_position" : "50"
		};
		var red_sky_blog_parallax = {
			"blog_parallax_speed" : "0.1",
			"blog_parallax_position" : "50"
		};
		var paged_data = {
			"startPage" : "1",
			"maxPages" : "1",
			"nextLink" : null,
			"loadingText" : "Loading...",
			"loadMoreText" : "Load More",
			"noMorePostsText" : "No More Posts"
		};
		var portfolio_data = {
			"startPage" : "1",
			"maxPages" : "2",
			"nextLink" : "?paged=2",
			"loadingText" : "Loading...",
			"loadMoreText" : "Load More",
			"noMorePostsText" : "No More Posts"
		};
		/* ]]> */
	</script>
	<script type='text/javascript' src='resources/js/custom.js'></script>

</body>

</html>